import { onMounted } from 'vue'
import { LogicFlow } from '@logicflow/core'
import RequestNode from '@/components/logic-editor/nodes/Request'

export function initLogicFlow(canvasId) {
  const lf = ref(null)
  onMounted(() => {
    nextTick(() => {
      lf.value = new LogicFlow({
        container: document.getElementById(canvasId),
        grid: {
          visible: true,
          type: 'mesh',
          size: 10,
          config: {
            color: '#eeeeee',
          },
        },
      })
      lf.value.register({
        type: 'request',
        view: RequestNode.view,
        model: RequestNode.model,
      })
      lf.value.render()
    })
  })
  return {
    logicFlowInstance: lf,
  }
}
